<template>
    <div>
        <div class="guidePage">
              <!-- Swiper -->
            <div class="swiper-container guidePage-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="guidePageslide" >
                            <img src="../../assets/images/guidepage/guide01.jpg" alt="">
                            <!-- <h3>渐进式javascript框架</h3> -->
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="guidePageslide" >
                            <img src="../../assets/images/guidepage/guide02.jpg" alt="">
                            <!-- <h3>渐进式javascript框架</h3> -->
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="guidePageslide" >
                            <img src="../../assets/images/guidepage/guide03.jpg" alt="">
                            <!-- <h3>渐进式javascript框架</h3> -->
                            
                            <van-button class="btn" type="primary" @click="goguide" size="max">进入首页</van-button>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination guidePage-pagination"></div>
            </div>
        </div>
    </div>
</template>

<script>
    // https://www.swiper.com.cn/
    // npm install swiper@5.3.6 -S
    import Swiper from "swiper";
    export default {
        
        mounted(){
            this.$nextTick(()=>{
                new Swiper('.guidePage-container', {
                    pagination: {
                        el: '.guidePage-pagination',
                    },
                });
            })
        },
        methods: {
            //跳到首页 后设置一个引导页的状态
            goguide(){
                this.$router.push({path:'home'});
                window.localStorage.setItem("guidePage",'true');
            }
        },
    }
</script>

<style lang="less" >

.guidePage-container {
    position: fixed !important; 
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
}

.guidePageslide{
    text-align: center;
    .btn{
        position: absolute;
        top:570px;
        left:115px;
        z-index:9;
        width:150px;
        height:45px;
        border-radius: 45px;;
    }
    img{
        width:100%;
        height:100%;
        display: block;
        position:relative;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        margin:0 auto;
    }
    h3{
        color:#595959;
    }

}
</style>